<template lang="pug">
  div.module
   div.label="2020年特色细分产业指标"
    div.static-row
      div.static-card(v-for="(item, index) in medicalData" :key="index")
        StaticCompareView(:itemData="item" :suffix="item.suffix")
</template>


<script>
import StaticCompareView from "./StaticCompareView";
export default {
  name: "ModuleMedicalData",
  components: {
  	StaticCompareView,
  },
  data() {
    return {
      medicalData: [
    //     {
    //       label: '主粮',
    //       // value: 17.1,
    //       decimals: 1,
    //       suffix: '亿元',
    //       area: {
    //         label: '种植面积',
    //         value: 20.212,
    //       },
		  // production: {
		  //   label: '产量',
		  //   value: 6.3,
		  // },
		  // output: {
		  //   label: '产值',
		  //   value: 28.4,
		  // }
    //     },
		// {
		//   label: '水果',
		//   // value: 17.1,
		//   decimals: 1,
		//   suffix: '亿元',
		//   area: {
		//     label: '种植面积',
		//     value: 20.212,
		//   },
		//   production: {
		//     label: '产量',
		//     value: 6.3,
		//   },
		//   output: {
		//     label: '产值',
		//     value: 28.4,
		//   }
		// },
        {
          label: '樱桃',
          // value: 130,
          decimals: 0,
		  suffix: '亿元',
          area: {
            label: '种植面积',
            value: 0.65,
          },
          production: {
            label: '产量',
            value: 0.032,
          },
          output: {
            label: '产值',
            value: 0.032,
          }
        },
    //     {
    //       label: '蔬菜',
    //       // value: 3,
    //       decimals: 0,
		  // suffix: '亿元',
    //      area: {
    //        label: '种植面积',
    //        value: 6.54,
    //      },
    //      production: {
    //        label: '产量',
    //        value: 11.8,
    //      },
    //      output: {
    //        label: '产值',
    //        value: 28.4,
    //      }
    //     },
        {
          label: '杨梅',
          // value: 2,
          decimals: 0,
		  suffix: '亿元',
          area: {
            label: '种植面积',
            value: 2.8,
          },
          production: {
            label: '产量',
            value: 4.54,
          },
          output: {
            label: '产值',
            value: 28.4,
          }
        },
        {
          label: '茭瓜',
          // value: 3,
          decimals: 0,
		  suffix: '亿元',
          area: {
            label: '种植面积',
            value: 0.5,
          },
          production: {
            label: '产量',
            value: 2.5,
          },
          output: {
            label: '产值',
            value: 28.4,
          }
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.static-row{
  display: table-row-group;
  justify-content: flex-end;
  padding-top: rem(20);
  .static-card{
    margin: 0 rem(14);
    padding: rem(10) rem(30);
	margin: rem(10) rem(14);
    position: relative;
    /* Google Chrome */
    backdrop-filter: blur(5px);
    background: rgba(0, 73, 104, 0.26);
    min-width: rem(220);
    box-sizing: border-box;
    &:before,
    &:after{
      content: '';
      display: block;
      @include size(rem(6), rem(8));
      position: absolute;
      right: rem(10);
    }
    &:before{
      top: rem(10);
      border-top: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
    &:after{
      bottom: rem(10);
      border-bottom: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
  }
}
.module{
	position: relative;
	padding-top: rem(20);
	display: flex;
	top: rem(-435);
	right: rem(30);
	justify-content: flex-end;
	.label{
		font-size: rem(22);
		color: #fff;
		margin-left: rem(42);
		justify-content: flex-end;
	}
}
</style>
